<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>拖拽功能实现 | vdesjs</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/vdesjslogo.png">
    <meta name="description" content="基于vue的可视化拖拽，代码生成工具">
    
    <link rel="preload" href="/assets/css/0.styles.d804b69f.css" as="style"><link rel="preload" href="/assets/js/app.3899a33f.js" as="script"><link rel="preload" href="/assets/js/2.3b0dfc05.js" as="script"><link rel="preload" href="/assets/js/6.e9991fad.js" as="script"><link rel="prefetch" href="/assets/js/10.e9e9dd68.js"><link rel="prefetch" href="/assets/js/11.1474aa90.js"><link rel="prefetch" href="/assets/js/12.36aab5a9.js"><link rel="prefetch" href="/assets/js/3.36b071a8.js"><link rel="prefetch" href="/assets/js/4.4ba5730b.js"><link rel="prefetch" href="/assets/js/5.ac6fff4e.js"><link rel="prefetch" href="/assets/js/7.c3b55bd1.js"><link rel="prefetch" href="/assets/js/8.6c4d8354.js"><link rel="prefetch" href="/assets/js/9.139e64a1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d804b69f.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">vdesjs</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/guide/sxyl.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  教程
</a></div><div class="nav-item"><a href="/cooperation/" class="nav-link">
  关于我们
</a></div><div class="nav-item"><a href="https://github.com/china-bin/vdesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/china-bin/vdesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/guide/sxyl.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  教程
</a></div><div class="nav-item"><a href="/cooperation/" class="nav-link">
  关于我们
</a></div><div class="nav-item"><a href="https://github.com/china-bin/vdesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/china-bin/vdesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/guide/sxyl.html" aria-current="page" class="active sidebar-link">实现原理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/sxyl.html#拖拽功能实现" class="sidebar-link">拖拽功能实现</a></li><li class="sidebar-sub-header"><a href="/guide/sxyl.html#json数据设计" class="sidebar-link">json数据设计</a></li><li class="sidebar-sub-header"><a href="/guide/sxyl.html#代码生成功能" class="sidebar-link">代码生成功能</a></li></ul></li><li><a href="/guide/extend.html" class="sidebar-link">扩展组件</a></li><li><a href="/guide/dir.html" class="sidebar-link">目录结构</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="拖拽功能实现"><a href="#拖拽功能实现" class="header-anchor">#</a> 拖拽功能实现</h2> <p>vdesjs的拖拽功能使用到了vuedraggble，vuedragable的实现是基于<a href="http://www.sortablejs.com/" target="_blank" rel="noopener noreferrer">sortable.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>,我们可以进入其官网体验禁止sorting模式。如下图所示：
<img src="/assets/img/sortable.0cca1b2c.png" alt="禁止sorting模式"></p> <p>那么禁止sorting模式正好符合我们需要的拖拽功能，可以由左侧拖拽至右侧，右侧禁止拖拽至左侧，右侧的上下可以自由拖拽排列。</p> <p>拖拽功能有了，那么就要考虑到后续组件的属性编辑与代码生成了。vuedraggble允许我们为组件去绑定json对象，比如我们从左侧拖拽至右侧可以理解为将就左侧绑定的json对象复制到右侧中，右侧的上下左右排序也可以理解为json对象在上下移动。vdesjs中部分dragaable的代码如下：</p> <p>左侧拖拽面板中的draggable代码：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>draggable
          <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;Compoent&quot;</span>
          <span class="token operator">:</span>list<span class="token operator">=</span><span class="token string">&quot;basicCompoents&quot;</span>
          <span class="token operator">:</span>clone<span class="token operator">=</span><span class="token string">&quot;cloneCompoents&quot;</span>
          <span class="token operator">:</span>options<span class="token operator">=</span>&quot;<span class="token punctuation">{</span>
            sort<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span>&quot;
          <span class="token operator">:</span>group<span class="token operator">=</span><span class="token string">&quot;{ name: 'components', pull: 'clone', put: false }&quot;</span>
        <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span>component<span class="token operator">-</span>container
            v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, i) in basicCompoents&quot;</span>
            <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;i&quot;</span>
            <span class="token operator">:</span>componentName<span class="token operator">=</span><span class="token string">&quot;item.componentName&quot;</span>
            <span class="token operator">:</span>name<span class="token operator">=</span><span class="token string">&quot;item.name&quot;</span>
          <span class="token operator">&gt;</span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>component<span class="token operator">-</span>container<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>draggable<span class="token operator">&gt;</span>


</code></pre></div><p>上述代码解析：</p> <ul><li>:list 为绑定的json对象数据</li> <li>:group中 name代表draggable的名称，如想从左侧拖拽至中间的展示面板，那么必须要设置成相同的。 pull设置成clone代表从左侧是复制一份相同的至中间， put设置成false代表不可以从其他draggable中放入这里。</li> <li>:clone中设置的方法，是当拖拽完成则会执行。（vdesjs在此处为组件对象设置全局唯一id）</li> <li>compoent-container为vdesjs中自定义的组件，其根据传入的组件名称，来渲染左侧面板应该显示的界面。</li></ul> <p>中间展示面板中的draggable代码：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>draggable
        <span class="token operator">:</span>list<span class="token operator">=</span><span class="token string">&quot;list&quot;</span>
        group<span class="token operator">=</span><span class="token string">&quot;components&quot;</span>
        <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;draggableDiv&quot;</span>
      <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div
          v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">&quot;(item, i) in list&quot;</span>
          <span class="token operator">:</span>key<span class="token operator">=</span><span class="token string">&quot;i&quot;</span>
          
          <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;content&quot;</span>
        <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;item.componentName == 'VanLayout'&quot;</span><span class="token operator">&gt;</span>
            <span class="token operator">&lt;</span>van<span class="token operator">-</span>layout  <span class="token operator">:</span>listIndex<span class="token operator">=</span><span class="token string">&quot;i&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>layout<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>component
        @click<span class="token punctuation">.</span>native<span class="token operator">=</span><span class="token string">&quot;switchIndex(i)&quot;</span>
         v<span class="token operator">-</span><span class="token keyword">else</span>
          <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;hoverborder&quot;</span>
          <span class="token operator">:</span>is<span class="token operator">=</span><span class="token string">&quot;item.componentName&quot;</span>
          <span class="token operator">:</span>myItem<span class="token operator">=</span><span class="token string">&quot;item&quot;</span>
        <span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>component<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>draggable<span class="token operator">&gt;</span>
</code></pre></div><p>上述代码解析:</p> <ul><li>中间面板中会判断是否是布局组件还是其他组件（因为布局组件相比较特殊，需要往每个列中放入draggable，来实现往布局中拖入组件）</li></ul> <h2 id="json数据设计"><a href="#json数据设计" class="header-anchor">#</a> json数据设计</h2> <p>该项目的拖拽本质上是json对象的移动复制，这里以基础组件的按钮json对象为例：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code> basicCompoents<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          name<span class="token operator">:</span> <span class="token string">&quot;按钮&quot;</span><span class="token punctuation">,</span>
          id<span class="token operator">:</span> <span class="token string">&quot;唯一值&quot;</span><span class="token punctuation">,</span>
          componentName<span class="token operator">:</span> <span class="token string">&quot;VanButton&quot;</span><span class="token punctuation">,</span>
          mStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          mClass<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          propValues<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
              label<span class="token operator">:</span> <span class="token string">&quot;标题&quot;</span><span class="token punctuation">,</span>
              key<span class="token operator">:</span> <span class="token string">&quot;title&quot;</span><span class="token punctuation">,</span>
              value<span class="token operator">:</span> <span class="token string">&quot;按钮&quot;</span><span class="token punctuation">,</span>
              type<span class="token operator">:</span> <span class="token string">&quot;text&quot;</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              label<span class="token operator">:</span> <span class="token string">&quot;按钮类型&quot;</span><span class="token punctuation">,</span>
              key<span class="token operator">:</span> <span class="token string">&quot;type&quot;</span><span class="token punctuation">,</span>
              type<span class="token operator">:</span> <span class="token string">&quot;select&quot;</span><span class="token punctuation">,</span>
              value<span class="token operator">:</span> <span class="token punctuation">{</span>
                chooseValue<span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
                data<span class="token operator">:</span> <span class="token punctuation">[</span>
                  <span class="token punctuation">{</span>
                    value<span class="token operator">:</span> <span class="token string">&quot;primary&quot;</span><span class="token punctuation">,</span>
                    label<span class="token operator">:</span> <span class="token string">&quot;主要按钮&quot;</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  <span class="token punctuation">{</span>
                    value<span class="token operator">:</span> <span class="token string">&quot;info&quot;</span><span class="token punctuation">,</span>
                    label<span class="token operator">:</span> <span class="token string">&quot;信息按钮&quot;</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  <span class="token punctuation">{</span>
                    value<span class="token operator">:</span> <span class="token string">&quot;default&quot;</span><span class="token punctuation">,</span>
                    label<span class="token operator">:</span> <span class="token string">&quot;默认按钮&quot;</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  <span class="token punctuation">{</span>
                    value<span class="token operator">:</span> <span class="token string">&quot;warning&quot;</span><span class="token punctuation">,</span>
                    label<span class="token operator">:</span> <span class="token string">&quot;警告按钮&quot;</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                  <span class="token punctuation">{</span>
                    value<span class="token operator">:</span> <span class="token string">&quot;danger&quot;</span><span class="token punctuation">,</span>
                    label<span class="token operator">:</span> <span class="token string">&quot;危险按钮&quot;</span><span class="token punctuation">,</span>
                  <span class="token punctuation">}</span><span class="token punctuation">,</span>
                <span class="token punctuation">]</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              label<span class="token operator">:</span> <span class="token string">&quot;按钮颜色&quot;</span><span class="token punctuation">,</span>
              key<span class="token operator">:</span> <span class="token string">&quot;color&quot;</span><span class="token punctuation">,</span>
              type<span class="token operator">:</span> <span class="token string">&quot;color&quot;</span><span class="token punctuation">,</span>
              value<span class="token operator">:</span> <span class="token string">&quot;#656262&quot;</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
</code></pre></div><p>上述代码解析</p> <ul><li>name 设置组件左侧面板中的展示名称</li> <li>componentName 设置组件的名称</li> <li>propValues 设置右侧面板的可以配置属性。每个项中的type属性决定右侧面板的类型。</li></ul> <h2 id="代码生成功能"><a href="#代码生成功能" class="header-anchor">#</a> 代码生成功能</h2> <p>代码生成选择了handlerbars作为模板引擎，用于将json数据根据每个组件对应编写的模板代码转换成可使用的代码。
如需了解handlerbars语法可前去<a href="https://www.handlebarsjs.cn/" target="_blank" rel="noopener noreferrer">handlebars中文网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>这里展示编写vdesjs代码模板所必须的模板语法：</p> <ul><li>数据获取</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>    <span class="token punctuation">{</span><span class="token punctuation">{</span>myItem<span class="token punctuation">.</span>propValues<span class="token punctuation">.</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">}</span><span class="token punctuation">}</span>

    <span class="token comment">//</span>
</code></pre></div><p>上述代码注意:  数据获取通过{{}}包围起来获取变量的值， 其中数组是通过.[index] 的方式来获取</p> <ul><li>循环</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span><span class="token punctuation">{</span>#each myItem<span class="token punctuation">.</span>propValues<span class="token punctuation">.</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">.</span>data<span class="token punctuation">}</span><span class="token punctuation">}</span>
        <span class="token operator">&lt;</span>van<span class="token operator">-</span>grid<span class="token operator">-</span>item icon<span class="token operator">=</span><span class="token string">&quot;{{icon}}&quot;</span> text<span class="token operator">=</span><span class="token string">&quot;{{name}}&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">/</span>each<span class="token punctuation">}</span><span class="token punctuation">}</span>

<span class="token comment">// 上述代码注意： 注意在each中是有对应的上下文的，如果在each中想使用外部的上下文，可通过 ../ 来获取， 如 {{../myItem.propValues.[1].value.num}} 这样的形式。</span>
</code></pre></div><ul><li>判断</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>  <span class="token punctuation">{</span><span class="token punctuation">{</span>#compare myItem<span class="token punctuation">.</span>propValues<span class="token punctuation">.</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>value<span class="token punctuation">.</span>chooseValue <span class="token string">'=='</span> <span class="token string">'multiple'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
  <span class="token operator">&lt;</span>van<span class="token operator">-</span>cell title<span class="token operator">=</span><span class="token string">&quot;选择多个日期&quot;</span> <span class="token operator">:</span>value<span class="token operator">=</span><span class="token string">&quot;date{{myItem.id}}&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;show = true&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>van<span class="token operator">-</span>calendar
      show<span class="token operator">-</span>confirm<span class="token operator">=</span><span class="token string">&quot;{{myItem.propValues.[1].value}}&quot;</span>
      color<span class="token operator">=</span><span class="token string">&quot;{{myItem.propValues.[2].value}}&quot;</span>
      v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">&quot;show{{myItem.id}}&quot;</span>
      type<span class="token operator">=</span><span class="token string">&quot;multiple&quot;</span>
      @confirm<span class="token operator">=</span><span class="token string">&quot;onConfirmMultiple{{myItem.id}}&quot;</span>
    <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">/</span>compare<span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre></div><p>上述代码注意: handlebars原始是不支持判断语法的，vdesjs中是通过自定义helper来扩展判断的。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/guide/extend.html">
        扩展组件
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.3899a33f.js" defer></script><script src="/assets/js/2.3b0dfc05.js" defer></script><script src="/assets/js/6.e9991fad.js" defer></script>
  </body>
</html>
